import { reactive, onMounted, onUnmounted } from 'vue'

export default function usePoint() {
  const point = reactive({
    x: 0,
    y: 0,
  })

  function onClick(event) {
    point.x = event.pageX
    point.y = event.pageY
    console.log(point.x, point.y)
  }

  onMounted(() => {
    window.addEventListener('click', onClick)
  })

  onUnmounted(() => {
    window.removeEventListener('click', onClick)
  })

  return point
}
